<template>
	<view class="page_content">
		<view class="img" :style="{'background-image': `url(${shopInfo.avatar})`}">
			<image :src="urlDomain+'crmebimage/presets/xiangji.png'"  @click="upHeadImg"></image>
		</view>
		
		<view class="flex">
			<view>店铺名称</view>
			<input type="text" placeholder="店铺名称" v-model="shopInfo.name" />
			<view class='iconfont icon-xiangyou'></view>
		</view>
		<view class="flex">
			<view>店铺简介</view>
			<input type="text" placeholder="店铺简介" v-model="shopInfo.intro" />
			<view class='iconfont icon-xiangyou'></view>
		</view>
		<!-- <view class="flex">
			<view>营业地址</view>
			<picker mode="region" @change="bindPickerCity"  style="flex: 1;">
				<input placeholder="营业地址" type="text" readonly disabled v-model="addressStr">
			</picker>
			<view class='iconfont icon-xiangyou'></view>
		</view> -->
		<view class="flex">
			<view>详细地址</view>
			<input type="text" v-model="shopInfo.addressDetail" placeholder="详细地址"  />
			<view class='iconfont icon-dizhi' @click="goToMap"></view>
		</view>
		<view class="flex">
			<view>营业时间</view>
			<view style="flex: 1;display: flex;">
				<picker mode="time" :end="etime" @change="bindPickerSTime" style="flex: 1;">
					<input placeholder="开始时间" type="text" readonly disabled v-model="stime">
				</picker>
				<view style="margin-left: 20rpx;">~</view>
				<picker mode="time" :start="stime" @change="bindPickerETime" style="width: 120rpx;">
					<input placeholder="结束时间" type="text" readonly disabled v-model="etime">
				</picker>
			</view>
		</view>
		<view class="flex">
			<view>联系电话</view>
			<input type="tel" v-model="shopInfo.servicePhone" placeholder="联系电话" />
			<view class='iconfont icon-xiangyou'></view>
		</view>
		
		<button class='submitBtn' @click="submitInfo">提交修改</button>
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import {
		updateMerInfoApi
	} from '@/api/merchant.js';
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				shopInfo: JSON.parse(this.$Cache.get('shopInfo')),
				stime: '',
				etime: ''
			}
		},
		computed: {
			
		},
		onLoad() {
			this.initData();
		},
		onShow() {
			// #ifdef H5
			let that = this;
			uni.$on('update',function(data){
				console.log(data);
				that.$set(that.shopInfo, 'addressDetail', data.address);
				that.$set(that.shopInfo, 'lat', data.location.lat);
				that.$set(that.shopInfo, 'lon', data.location.lng);
			});
			// #endif
		},
		methods: {
			initData(){
				let that = this;
				if(that.shopInfo.workArea!=null && that.shopInfo.workArea!=''){
					that.stime = that.shopInfo.workArea.split('~')[0];
					that.etime = that.shopInfo.workArea.split('~')[1];
				}
			},
			goToMap(){
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/address/mapAddress/mapAddress?pre=update'
				})
				// #endif
				// #ifdef MP
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.shopInfo.addressDetail = res.address;
						this.shopInfo.lat = res.latitude;
						this.shopInfo.lon = res.longitude;
					}
				});
				// #endif
			},
			bindPickerSTime(e) {
				this.stime = e.detail.value
			},
			bindPickerETime(e) {
				this.etime = e.detail.value
			},
			upHeadImg() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					that.shopInfo.avatar = res;
				});
			},
			submitInfo: function() {
				let workArea = this.stime + '~' + this.etime;
				this.shopInfo.workArea = workArea;
				
				updateMerInfoApi(this.shopInfo).then(res =>{
					that.$util.Tips({
						title: res.message
					});
					if(res.code==200){
						//缓存
						Cache.set("shopInfo", this.shopInfo);
						uni.navigateBack();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img{
		height: 360rpx;
		line-height: 420rpx;
		background-color: gray;
		text-align: center;
		
		image {
			width: 88rpx;
			height: 88rpx;
		}
	}
	
	.flex{
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #4D5061;
		justify-content: center;
		align-items: center;
		
		input{
			flex: 1;
			text-align: right;
			color: #6F7C85;
		}
	}
	.submitBtn {
		width: 588rpx;
		margin: 25px auto 25px auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #fff;
		background-color: #4484FF;
	}
	.submitBtn.on {
		background-color: #4484FF;
	}

</style>
